From 45620252cabd990d170493d6b33dc4b80f821311 Mon Sep 17 00:00:00 2001 From: fumink7 <711fumi@pepabo.com> Date: Fri, 29 Nov 2024 11:47:40 +0900 Subject: [PATCH 1/6] Add lint and test steps in github action workflow --- .github/workflows/lint.yml | 22 ++++++++++++++++++++++ .github/workflows/test.yml | 22 ++++++++++++++++++++++ .vscode/settings.json | 4 +++- 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/lint.yml create mode 100644 .github/workflows/test.yml diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 0000000..119995b --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,22 @@ +name: Lint + +on: [pull_request] + +jobs: + lint: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version-file: '.node-version' + + - name: Install dependencies + run: npm install + + - name: Run Lint + run: npm run lint diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..6861ac1 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,22 @@ +name: Test + +on: [pull_request] + +jobs: + test: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version-file: '.node-version' + + - name: Install dependencies + run: npm install + + - name: Run Tests + run: npm run test diff --git a/.vscode/settings.json b/.vscode/settings.json index 836097d..8549112 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -15,5 +15,7 @@ "files.insertFinalNewline": true, "[markdown]": { "files.trimTrailingWhitespace": false - } + }, + "stylelint.stylelintPath": "node_modules/stylelint", + "stylelint.validate": ["scss"] } From c44f16b0fbf50e7bbcc4dc219dfa75426063caf2 Mon Sep 17 00:00:00 2001 From: fumink7 <711fumi@pepabo.com> Date: Fri, 29 Nov 2024 16:08:54 +0900 Subject: [PATCH 2/6] Fix lint error --- packages/adapter/functions/size/_border.scss | 2 +- packages/button/_functions.test.scss | 1 - packages/button/_mixins.scss | 4 +- packages/callout/_mixins.scss | 12 ++--- packages/callout/_variables.scss | 2 +- packages/card/_mixins.scss | 5 +- packages/card/_variables.scss | 1 - packages/checkbox/_mixins.scss | 2 +- packages/progress-indicator/_mixins.scss | 7 +-- packages/radio/_mixins.scss | 6 +-- packages/select/_mixins.scss | 6 +-- packages/snackbar/_mixins.scss | 14 ++--- packages/stories-web/src/card.stories.tsx | 27 +++++----- .../stories-web/src/components/card/Card.tsx | 52 ++++++++----------- packages/table/_mixins.scss | 4 +- packages/textfield/_mixins.scss | 6 +-- 16 files changed, 71 insertions(+), 80 deletions(-) diff --git a/packages/adapter/functions/size/_border.scss b/packages/adapter/functions/size/_border.scss index 7ee0271..4ce2d3b 100644 --- a/packages/adapter/functions/size/_border.scss +++ b/packages/adapter/functions/size/_border.scss @@ -51,7 +51,7 @@ $border-size-tokens: map.get( @function get-progress-indicator-border-size($size: l) { $tokens: map.get($border-size-tokens, progress-indicator); - $available-sizes: ('s', 'm', 'l'); + $available-sizes: ("s", "m", "l"); @if list.index($available-sizes, $size) == null { @error error-message.any-one-of( diff --git a/packages/button/_functions.test.scss b/packages/button/_functions.test.scss index 71a953c..a647b70 100644 --- a/packages/button/_functions.test.scss +++ b/packages/button/_functions.test.scss @@ -43,4 +43,3 @@ @return assert.equals("#{$actual}", "calc(2.5rem - 0.125rem)"); } - diff --git a/packages/button/_mixins.scss b/packages/button/_mixins.scss index 830850c..1d160f6 100644 --- a/packages/button/_mixins.scss +++ b/packages/button/_mixins.scss @@ -314,14 +314,14 @@ adapter.get-button-border-size( $appearance: $appearance ); + outline: functions.get-outline($state: $state); + outline-offset: adapter.get-focus-ring-outline-offset(); box-shadow: functions.get-box-shadow( $appearance: $appearance, $color: $color, $state: $state ); - outline: functions.get-outline($state: $state); - outline-offset: adapter.get-focus-ring-outline-offset(); } @mixin -appearance-state-ruleset($appearance, $brightness, $color) { diff --git a/packages/callout/_mixins.scss b/packages/callout/_mixins.scss index 27befcd..385e8df 100644 --- a/packages/callout/_mixins.scss +++ b/packages/callout/_mixins.scss @@ -5,12 +5,12 @@ @mixin style($options: variables.$default-options) { display: flex; - $options: map.merge(variables.$default-options, $options); padding: adapter.get-spacing-size(map.get($options, size)); - border-radius: adapter.get-radius-size(map.get($options, size)); - box-shadow: adapter.get-elevation-box-shadow(1); font-size: adapter.get-font-size(map.get($options, size)); line-height: adapter.get-line-height($level: map.get($options, size), $density: normal); + border-radius: adapter.get-radius-size(map.get($options, size)); + box-shadow: adapter.get-elevation-box-shadow(1); + $options: map.merge(variables.$default-options, $options); ._leading { padding-right: adapter.get-spacing-size(s); @@ -54,7 +54,7 @@ @include -state-style(notice); } - @each $size in 's', 'm', 'l' { + @each $size in "s", "m", "l" { &.-size-#{$size} { @include -size-style($size); } @@ -62,10 +62,10 @@ } @mixin -state-style($state) { - background-color: adapter.get-semantic-color($state, 100); color: adapter.get-semantic-color($state, 800); + background-color: adapter.get-semantic-color($state, 100); - ._leading:after { + ._leading::after { content: map.get(variables.$icon-map, $state); } } diff --git a/packages/callout/_variables.scss b/packages/callout/_variables.scss index 8427465..fdb4a90 100644 --- a/packages/callout/_variables.scss +++ b/packages/callout/_variables.scss @@ -14,4 +14,4 @@ $title-margin-map: ( s: xxs, m: xs, l: s -) +); diff --git a/packages/card/_mixins.scss b/packages/card/_mixins.scss index 3f3c36e..59508c0 100644 --- a/packages/card/_mixins.scss +++ b/packages/card/_mixins.scss @@ -44,6 +44,7 @@ @include -gapless-rule; } @else { padding: adapter.get-spacing-size(m); + @include adapter.mq-boundary(up, m) { padding: adapter.get-spacing-size(l); } @@ -65,12 +66,12 @@ ._media { line-height: 0; + ._thumbnail { max-width: 100%; height: auto; } } - } @mixin export { @@ -105,8 +106,8 @@ @mixin -shape-rule($shape: circle) { @if $shape == circle { - border-radius: adapter.get-radius-size($level: l); overflow: hidden; + border-radius: adapter.get-radius-size($level: l); } @else if $shape == square { border-radius: 0; } diff --git a/packages/card/_variables.scss b/packages/card/_variables.scss index 7e81a30..4c601ac 100644 --- a/packages/card/_variables.scss +++ b/packages/card/_variables.scss @@ -12,4 +12,3 @@ $available-appearance: ( filled, outlined ); - diff --git a/packages/checkbox/_mixins.scss b/packages/checkbox/_mixins.scss index 73335e3..746f9d9 100644 --- a/packages/checkbox/_mixins.scss +++ b/packages/checkbox/_mixins.scss @@ -89,9 +89,9 @@ padding: 0; background-color: transparent; border: none; + border-radius: adapter.get-radius-size($level: m); outline: none; appearance: unset; - border-radius: adapter.get-radius-size($level: m); } @mixin -child-element-proto() { diff --git a/packages/progress-indicator/_mixins.scss b/packages/progress-indicator/_mixins.scss index 050ed2d..8da20f6 100644 --- a/packages/progress-indicator/_mixins.scss +++ b/packages/progress-indicator/_mixins.scss @@ -62,17 +62,18 @@ left: adapter.get-spacing-size($level: xxs); display: block; box-sizing: border-box; - border-style: solid; border-color: adapter.get-progress-indicator-indicator-surface-color(); - border-radius: 50%; + border-style: solid; border-width: adapter.get-progress-indicator-border-size($size: l); + border-radius: 50%; transform: rotate(45deg); transform-origin: center; transition: clip-path 0.1s ease; content: ""; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%, 50% 50%); } - @each $size in 's', 'm', 'l' { + + @each $size in "s", "m", "l" { &.-size-#{$size} { @include -size-style($size); } diff --git a/packages/radio/_mixins.scss b/packages/radio/_mixins.scss index 566081a..8af2bdc 100644 --- a/packages/radio/_mixins.scss +++ b/packages/radio/_mixins.scss @@ -90,11 +90,11 @@ @mixin -ruleset($states: (enabled)) { @include -proto; - cursor: functions.get-cursor($states: $states); - opacity: functions.get-opacity($states: $states); + border-radius: 50%; outline: functions.get-outline($states: $states); outline-offset: adapter.get-focus-ring-outline-offset(); - border-radius: 50%; + cursor: functions.get-cursor($states: $states); + opacity: functions.get-opacity($states: $states); &::before { @include -background-style($states: $states); diff --git a/packages/select/_mixins.scss b/packages/select/_mixins.scss index 42add4a..b8ec0f0 100644 --- a/packages/select/_mixins.scss +++ b/packages/select/_mixins.scss @@ -16,6 +16,9 @@ position: relative; display: inline-block; box-sizing: border-box; + + // width + width: auto; // stylelint-disable-line order/properties-order vertical-align: text-bottom; ._select { @@ -44,9 +47,6 @@ clip-path: polygon(0 0, 100% 0, 50% 100%); } - // width - width: auto; // stylelint-disable-line order/properties-order - @include -width-rule( $width: map.get($options, width) ); diff --git a/packages/snackbar/_mixins.scss b/packages/snackbar/_mixins.scss index af56445..a4c84d4 100644 --- a/packages/snackbar/_mixins.scss +++ b/packages/snackbar/_mixins.scss @@ -6,16 +6,17 @@ $options: map.merge(variables.$default-options, $options); display: flex; + gap: adapter.get-spacing-size(map.get($options, size)); align-items: center; - font-size: adapter.get-font-size(map.get($options, size)); padding: adapter.get-spacing-size(map.get($options, size)); - gap: adapter.get-spacing-size(map.get($options, size)); + font-size: adapter.get-font-size(map.get($options, size)); border-radius: adapter.get-radius-size(map.get($options, size)); box-shadow: adapter.get-elevation-box-shadow(1); visibility: hidden; - opacity: 0; - translate: 0 10%; + opacity: 0%; transition: all 0.4s; + translate: 0 10%; + @include -state-style(map.get($options, color)); &.-color-positive { @@ -37,20 +38,19 @@ &:active, &.--active { visibility: visible; - opacity: 1; + opacity: 100%; translate: 0 0; transition: all 0.4s; } - ._trailing { margin-left: auto; } } @mixin -state-style($state) { - background-color: adapter.get-semantic-color($state, 100); color: adapter.get-semantic-color($state, 800); + background-color: adapter.get-semantic-color($state, 100); } @mixin export { diff --git a/packages/stories-web/src/card.stories.tsx b/packages/stories-web/src/card.stories.tsx index 52b59ab..2b7e2f3 100644 --- a/packages/stories-web/src/card.stories.tsx +++ b/packages/stories-web/src/card.stories.tsx @@ -1,20 +1,19 @@ -import type { StoryFn, Meta } from '@storybook/react' -import React from 'react' -import Card, { Props } from './components/card/Card' -import fixture from '../assets/fixture.jpg' +import type { StoryFn, Meta } from "@storybook/react"; +import React from "react"; +import Card, { Props } from "./components/card/Card"; export default { - title: 'Components/Card', - component: Card -} as Meta + title: "Components/Card", + component: Card, +} as Meta; -const Template: StoryFn = (args) => +const Template: StoryFn = (args) => ; -export const Index = Template.bind({}) +export const Index = Template.bind({}); Index.args = { - appearance: 'elevated', - body: 'Card body', - color: 'primary', + appearance: "elevated", + body: "Card body", + color: "primary", isGapless: false, - shape: 'circle' -} + shape: "circle", +}; diff --git a/packages/stories-web/src/components/card/Card.tsx b/packages/stories-web/src/components/card/Card.tsx index 576a747..d8c57f7 100644 --- a/packages/stories-web/src/components/card/Card.tsx +++ b/packages/stories-web/src/components/card/Card.tsx @@ -1,50 +1,40 @@ -import React, { FC, ReactNode } from 'react' -import { Shape } from '../types' +import React, { FC } from "react"; +import { Shape } from "../types"; export interface Props { - appearance?: 'filled' | 'outlined' | 'elevated'; - body?: string - color?: 'primary' | 'secondary' | 'tertiary'; - isGapless?: boolean - shape?: Shape + appearance?: "filled" | "outlined" | "elevated"; + body?: string; + color?: "primary" | "secondary" | "tertiary"; + isGapless?: boolean; + shape?: Shape; } const Card: FC = (props: Props) => { - const { - appearance, - body, - color, - isGapless, - shape, - ...rest - } = props; - - const classes = [`in-card`] - - if (typeof appearance !== 'undefined') { - classes.push(`-appearance-${appearance}`) + const { appearance, body, color, isGapless, shape, ...rest } = props; + + const classes = [`in-card`]; + + if (typeof appearance !== "undefined") { + classes.push(`-appearance-${appearance}`); } - if (typeof color !== 'undefined') { - classes.push(`-color-${color}`) + if (typeof color !== "undefined") { + classes.push(`-color-${color}`); } if (isGapless) { - classes.push('-is-gapless') + classes.push("-is-gapless"); } - if (typeof shape !== 'undefined') { - classes.push(`-shape-${shape}`) + if (typeof shape !== "undefined") { + classes.push(`-shape-${shape}`); } return ( -
+
{body || null}
); -} +}; -export default Card +export default Card; diff --git a/packages/table/_mixins.scss b/packages/table/_mixins.scss index a192848..e0edb3e 100644 --- a/packages/table/_mixins.scss +++ b/packages/table/_mixins.scss @@ -98,13 +98,15 @@ tr:nth-child(even) td { background-color: adapter.get-surface-color(light, secondary); } + tr:nth-child(odd) td { background-color: adapter.get-surface-color(light, primary); } } @mixin -grid-border { - th, td { + th, + td { border: adapter.get-table-border-size() solid adapter.get-border-color($brightness: light, $name: mid_emphasis); } } diff --git a/packages/textfield/_mixins.scss b/packages/textfield/_mixins.scss index 69af978..0ccc04f 100644 --- a/packages/textfield/_mixins.scss +++ b/packages/textfield/_mixins.scss @@ -16,6 +16,9 @@ position: relative; display: inline-block; box-sizing: border-box; + + // width + width: auto; // stylelint-disable-line order/properties-order vertical-align: text-bottom; ._input { @@ -57,9 +60,6 @@ resize: vertical; } - // width - width: auto; // stylelint-disable-line order/properties-order - @include -width-rule( $width: map.get($options, width) ); From 87a66a2041875892907088bc2acaf4e2ec179d1b Mon Sep 17 00:00:00 2001 From: Fumihiro Nakahara <598763+fumink7@users.noreply.github.com> Date: Fri, 6 Dec 2024 14:36:15 +0900 Subject: [PATCH 3/6] Update .github/workflows/lint.yml Use `npm ci` Co-authored-by: piyoppi <3podvator@gmail.com> --- .github/workflows/lint.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 119995b..25950bd 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -16,7 +16,7 @@ jobs: node-version-file: '.node-version' - name: Install dependencies - run: npm install + run: npm ci - name: Run Lint run: npm run lint From 909939ecd31ad15504f634fee135e52d39460f91 Mon Sep 17 00:00:00 2001 From: Fumihiro Nakahara <598763+fumink7@users.noreply.github.com> Date: Fri, 6 Dec 2024 14:36:28 +0900 Subject: [PATCH 4/6] Update .github/workflows/test.yml Use `npm ci` Co-authored-by: piyoppi <3podvator@gmail.com> --- .github/workflows/test.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 6861ac1..9d17e3d 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -16,7 +16,7 @@ jobs: node-version-file: '.node-version' - name: Install dependencies - run: npm install + run: npm ci - name: Run Tests run: npm run test From 489022e401da094f5f08b9ebc830f24ebda84325 Mon Sep 17 00:00:00 2001 From: Fumihiro Nakahara <598763+fumink7@users.noreply.github.com> Date: Fri, 6 Dec 2024 14:39:19 +0900 Subject: [PATCH 5/6] Update .github/workflows/lint.yml Update CI trigger Co-authored-by: piyoppi <3podvator@gmail.com> --- .github/workflows/lint.yml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 25950bd..f34b192 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -1,6 +1,12 @@ name: Lint -on: [pull_request] +on: + push: + branches: + - main + pull_request: + branches: + - main jobs: lint: From d23325194a5dc65be8dceb1e54bad6ba2a41c245 Mon Sep 17 00:00:00 2001 From: Fumihiro Nakahara <598763+fumink7@users.noreply.github.com> Date: Fri, 6 Dec 2024 14:39:29 +0900 Subject: [PATCH 6/6] Update .github/workflows/test.yml Update CI trigger Co-authored-by: piyoppi <3podvator@gmail.com> --- .github/workflows/test.yml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 9d17e3d..dbf1b89 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,6 +1,12 @@ name: Test -on: [pull_request] +on: + push: + branches: + - main + pull_request: + branches: + - main jobs: test: