-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7 from Jurfest/feature/utils
feature/utils
- Loading branch information
Showing
91 changed files
with
1,920 additions
and
1,801 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| name: Deploy Storybook to Chromatic | ||
|
|
||
| on: | ||
| push: | ||
| branches: | ||
| - main | ||
|
|
||
| jobs: | ||
| build-and-deploy: | ||
| runs-on: ubuntu-latest | ||
|
|
||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v4 | ||
|
|
||
| - name: Setup Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: 20 | ||
|
|
||
| # Install dependencies based on the package-lock.json file for reliability and speed | ||
| - name: Install dependencies | ||
| run: npm ci | ||
|
|
||
| # Optional: Uncomment the build-storybook step to apply custom build steps or to verify the build beforehand | ||
| # - name: Build Storybook | ||
| # run: npm run build-storybook | ||
|
|
||
| # Deploy Storybook using Chromatic's streamlined process (includes building the Storybook | ||
| - name: Deploy Storybook | ||
| run: npx chromatic | ||
| env: | ||
| CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| // import { addons } from '@storybook/manager-api'; | ||
| // import { themes } from '@storybook/theming'; | ||
|
|
||
| // addons.setConfig({ | ||
| // theme: themes.dark, | ||
| // }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
104 changes: 36 additions & 68 deletions
104
libs/shared/ui-design-system/src/lib/components/atoms/button/button.component.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,46 @@ | ||
| import { importProvidersFrom } from '@angular/core'; | ||
| import { | ||
| BrowserAnimationsModule, | ||
| provideAnimations, | ||
| } from '@angular/platform-browser/animations'; | ||
| import { | ||
| applicationConfig, | ||
| Meta, | ||
| moduleMetadata, | ||
| StoryObj, | ||
| } from '@storybook/angular'; | ||
| import { expect, within } from '@storybook/test'; | ||
|
|
||
| import { ButtonComponent } from './button.component'; | ||
| import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; | ||
| import { MatButtonModule } from '@angular/material/button'; | ||
|
|
||
| // const meta: Meta<ButtonComponent> = { | ||
| // component: ButtonComponent, | ||
| // title: 'Design System/Atoms/Button', | ||
| // decorators: [ | ||
| // // Apply application config to all stories | ||
| // applicationConfig({ | ||
| // // List of providers and environment providers that should be available to the root component and all its children. | ||
| // providers: [ | ||
| // // Import application-wide providers from a module | ||
| // importProvidersFrom(BrowserAnimationsModule), | ||
| // // Or use provide-style functions if available instead, e.g. | ||
| // provideAnimations(), | ||
| // ], | ||
| // }), | ||
| // ], | ||
| // args: { | ||
| // label: 'Button', | ||
| // }, | ||
| // }; | ||
| // export default meta; | ||
|
|
||
| // type Story = StoryObj<ButtonComponent>; | ||
|
|
||
| // export const Primary: Story = {}; | ||
|
|
||
| // export const Heading: Story = { | ||
| // play: async ({ canvasElement }) => { | ||
| // const canvas = within(canvasElement); | ||
| // expect(canvas.getByText(/Button/gi)).toBeTruthy(); | ||
| // }, | ||
| // }; | ||
|
|
||
| const Template = (args: ButtonComponent) => ({ | ||
| props: args, | ||
| }); | ||
| import { ButtonComponent } from './button.component'; | ||
| import { IconComponent } from '../icon/icon.component'; | ||
|
|
||
| export default { | ||
| title: 'Design System/Atoms/Button', | ||
| component: ButtonComponent, | ||
| title: 'Design System/Atoms/Button', | ||
| tags: ['autodocs'], | ||
| // decorators: [ | ||
| // moduleMetadata({ | ||
| // imports: [MatButtonModule], | ||
| // }), | ||
|
|
||
| // // Apply application config to all stories | ||
| // applicationConfig({ | ||
| // // List of providers and environment providers that should be available to the root component and all its children. | ||
| // providers: [ | ||
| // // Import application-wide providers from a module | ||
| // importProvidersFrom(BrowserAnimationsModule), | ||
| // // Or use provide-style functions if available instead, e.g. | ||
| // provideAnimations(), | ||
| // ], | ||
| // }), | ||
| // ], | ||
| decorators: [ | ||
| moduleMetadata({ | ||
| imports: [MatButtonModule, IconComponent], | ||
| }), | ||
| ], | ||
| } as Meta; | ||
|
|
||
| type ButtonStory = StoryObj<ButtonComponent>; | ||
|
|
||
| export const Default: ButtonStory = { | ||
| render: (args) => ({ | ||
| props: args, | ||
| template: ` | ||
| <design-system-button (buttonClickEvent)="onClick($event)"> | ||
| Voltar ao início | ||
| </design-system-button> | ||
| `, | ||
| }), | ||
| }; | ||
|
|
||
| export const Default = Template.bind({}); | ||
| Default.args = { | ||
| label: 'Button label', | ||
| export const WithIconAtRight: ButtonStory = { | ||
| render: (args) => ({ | ||
| props: args, | ||
| template: ` | ||
| <design-system-button (buttonClickEvent)="onClick($event)"> | ||
| Click me with icon | ||
| <design-system-icon iconName="home" data-testid="home-icon"></design-system-icon> | ||
| </design-system-button> | ||
| `, | ||
| }), | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
| expect(canvas.getByTestId(/home-icon/gi)).toBeTruthy(); | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 14 additions & 8 deletions
22
libs/shared/ui-design-system/src/lib/components/atoms/colors-grid/colors-grid.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 32 additions & 12 deletions
44
libs/shared/ui-design-system/src/lib/components/atoms/colors-grid/colors-grid.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,39 @@ | ||
| .dynamic-background { | ||
| :host { | ||
| display: block; | ||
| } | ||
|
|
||
| .bg-dynamic { | ||
| background-color: var(--dynamic-color); | ||
| padding: 2rem; | ||
| border-radius: 0.5rem; | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .color-description { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| flex-direction: row; | ||
| .text-white { | ||
| color: #fff; | ||
| } | ||
|
|
||
| // .custom { | ||
| // color: #000; | ||
| // } | ||
|
|
||
| &.custom { | ||
| color: #000; | ||
| } | ||
| .text-black { | ||
| color: #000; | ||
| } | ||
|
|
||
| // .gradient-text { | ||
| // background: linear-gradient(90deg, #ff6ec4, #7873f5); | ||
| // -webkit-background-clip: text; | ||
| // -webkit-text-fill-color: transparent; | ||
| // background-clip: text; | ||
| // text-fill-color: transparent; | ||
| // animation: gradient-animation 3s infinite; | ||
| // } | ||
|
|
||
| // @keyframes gradient-animation { | ||
| // 0% { | ||
| // background-position: 0% 50%; | ||
| // } | ||
| // 50% { | ||
| // background-position: 100% 50%; | ||
| // } | ||
| // 100% { | ||
| // background-position: 0% 50%; | ||
| // } | ||
| // } |
Oops, something went wrong.