up sb typo icons colors
This commit is contained in:
Tykayn
tykayn
parent
45b92e145c
commit
eadad6cd64
8 changed files with 220 additions and 11 deletions
|
|
@ -3,7 +3,14 @@
|
|||
"compilerOptions": {
|
||||
"types": ["node"],
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"resolveJsonModule": true
|
||||
"resolveJsonModule": true,
|
||||
"baseUrl": "../",
|
||||
"paths": {
|
||||
"sae-lib/*": [
|
||||
"../my-workspace/dist/sae-lib/*",
|
||||
"../my-workspace/projects/sae-lib/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
|
||||
"include": ["../src/**/*.stories.*", "./preview.ts"],
|
||||
|
|
|
|||
|
|
@ -1,15 +1,75 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { ColorDisplay } from 'sae-lib/colours/color-display/color-display';
|
||||
import { NgStyle, CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-couleurs',
|
||||
imports: [],
|
||||
template: `
|
||||
<p>
|
||||
couleurs works!
|
||||
</p>
|
||||
imports: [ColorDisplay,
|
||||
NgStyle,
|
||||
CommonModule],
|
||||
template: `
|
||||
<div class="color-box"
|
||||
[ngStyle]="{ background: backgroundColor, 'border-color': backgroundColor }"
|
||||
>
|
||||
<div class="top" >
|
||||
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="name">
|
||||
{{name}}
|
||||
</div>
|
||||
<div class="hexacode">
|
||||
{{hexaCode}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`,
|
||||
styles: ``
|
||||
styles: `:host {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 11.4rem;
|
||||
border-radius: 0.5rem;
|
||||
border: solid 2px transparent;
|
||||
box-shadow: 0 5px 10px #eee;
|
||||
color: #aaa;
|
||||
max-width: 150px;
|
||||
|
||||
.top {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
border: solid 1px #aaa;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.name, .hexacode {
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hexacode {
|
||||
padding-top: 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
`
|
||||
})
|
||||
export class Couleurs {
|
||||
|
||||
@Input() public hexaCode: string = '#cc0000';
|
||||
@Input() public name: string = 'color name';
|
||||
@Input() public backgroundColor: string = '';
|
||||
|
||||
ngOnInit() {
|
||||
if (this.hexaCode) {
|
||||
this.backgroundColor = this.hexaCode
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,38 @@ import { Component } from '@angular/core';
|
|||
selector: 'app-icones',
|
||||
imports: [],
|
||||
template: `
|
||||
<p>
|
||||
icones works!
|
||||
<h1 >
|
||||
Icones
|
||||
</h1>
|
||||
<p class="annotation">
|
||||
<i class="ri-home-line ri-2x"></i>
|
||||
<i class="ri-home-line ri-3x"></i>
|
||||
<i class="ri-home-line ri-4x"></i>
|
||||
<i class="ri-home-line ri-5x"></i>
|
||||
<i class="ri-home-line ri-6x"></i>
|
||||
<i class="ri-home-line ri-7x"></i>
|
||||
<i class="ri-home-line ri-8x"></i>
|
||||
<i class="ri-home-line ri-9x"></i>
|
||||
</p>
|
||||
<p class="note">
|
||||
<i class="ri-file-line ri-2x"></i>
|
||||
<i class="ri-arrow-right-line ri-3x"></i>
|
||||
<i class="ri-arrow-left-line ri-4x"></i>
|
||||
<i class="ri-arrow-up-line ri-5x"></i>
|
||||
<i class="ri-arrow-down-line ri-6x"></i>
|
||||
<i class="ri-arrow-left-line ri-7x"></i>
|
||||
<i class="ri-arrow-down-line ri-8x"></i>
|
||||
<i class="ri-arrow-right-line ri-9x"></i>
|
||||
</p>
|
||||
<p class="note">
|
||||
<i class="ri-user-line ri-2x"></i>
|
||||
<i class="ri-computer-line ri-3x"></i>
|
||||
<i class="ri-smartphone-line ri-4x"></i>
|
||||
<i class="ri-mail-line ri-5x"></i>
|
||||
<i class="ri-message-line ri-6x"></i>
|
||||
<i class="ri-phone-line ri-7x"></i>
|
||||
<i class="ri-calendar-line ri-8x"></i>
|
||||
<i class="ri-calendar-line ri-9x"></i>
|
||||
</p>
|
||||
`,
|
||||
styles: ``
|
||||
|
|
|
|||
|
|
@ -4,9 +4,59 @@ import { Component } from '@angular/core';
|
|||
selector: 'app-typographies',
|
||||
imports: [],
|
||||
template: `
|
||||
<h1>
|
||||
Typographies
|
||||
</h1>
|
||||
<h2>
|
||||
Titre de niveau 2
|
||||
</h2>
|
||||
<h3>
|
||||
Titre de niveau 3
|
||||
</h3>
|
||||
<h4>
|
||||
Titre de niveau 4
|
||||
</h4>
|
||||
<h5>
|
||||
Titre de niveau 5
|
||||
</h5>
|
||||
<h6>
|
||||
Titre de niveau 6
|
||||
</h6>
|
||||
<p>
|
||||
Paragraphe
|
||||
</p>
|
||||
<p class="annotation">
|
||||
Annotation
|
||||
</p>
|
||||
<p class="note">
|
||||
Note
|
||||
</p>
|
||||
<p>
|
||||
typographies works!
|
||||
</p>
|
||||
<blockquote>
|
||||
Citation
|
||||
lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</blockquote>
|
||||
<cite>
|
||||
Citation
|
||||
lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</cite>
|
||||
<pre>
|
||||
Code
|
||||
</pre>
|
||||
<div class="has-text-right">
|
||||
Texte aligné à droite
|
||||
</div>
|
||||
<div class="has-text-center">
|
||||
Texte aligné au centre
|
||||
</div>
|
||||
<div class="has-text-left">
|
||||
Texte aligné à gauche
|
||||
</div>
|
||||
<div class="main-title">
|
||||
Titre principal
|
||||
</div>
|
||||
`,
|
||||
styles: ``
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { TagsChips } from '../../app/composants/tags-chips/tags-chips';
|
||||
import { Index as TogglesIndex } from 'sae-lib/toggles/index/index';
|
||||
|
||||
const meta: Meta<TagsChips> = {
|
||||
title: 'Components/Composants/Tags Chips',
|
||||
|
|
@ -11,4 +12,18 @@ type Story = StoryObj<TagsChips>;
|
|||
|
||||
export const Default: Story = { render: () => ({}) };
|
||||
|
||||
export const WithToggle: Story = {
|
||||
render: () => ({
|
||||
template: `
|
||||
<div style="display:flex; gap: 24px; align-items: flex-start;">
|
||||
<app-tags-chips></app-tags-chips>
|
||||
<sae-toggles></sae-toggles>
|
||||
</div>
|
||||
`,
|
||||
moduleMetadata: {
|
||||
imports: [TogglesIndex]
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
25
sb/src/stories/foundations/color-display.stories.ts
Normal file
25
sb/src/stories/foundations/color-display.stories.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { Couleurs } from 'src/app/foundations/couleurs/couleurs';
|
||||
|
||||
const meta: Meta<Couleurs> = {
|
||||
title: 'Foundations/Couleurs/Color Display',
|
||||
component: Couleurs,
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
hexaCode: { control: 'text' },
|
||||
name: { control: 'text' },
|
||||
}
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<Couleurs>;
|
||||
|
||||
export const Example: Story = {
|
||||
render: (args) => ({ props: args }),
|
||||
args: {
|
||||
hexaCode: '#165DFF',
|
||||
name: 'Primary 600'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
15
sb/src/stories/foundations/typo-index.stories.ts
Normal file
15
sb/src/stories/foundations/typo-index.stories.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { Index as TypoIndex } from 'sae-lib/typo/index/index';
|
||||
import {Typographies} from '../../app/foundations/typographies/typographies';
|
||||
|
||||
const meta: Meta<Typographies> = {
|
||||
title: 'Foundations/Typographies/Index',
|
||||
component: Typographies,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<Typographies>;
|
||||
|
||||
export const Default: Story = { render: () => ({}) };
|
||||
|
||||
|
||||
|
|
@ -4,7 +4,14 @@
|
|||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
"types": [],
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"sae-lib/*": [
|
||||
"../my-workspace/dist/sae-lib/*",
|
||||
"../my-workspace/projects/sae-lib/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue