fix(Text): add handling code for unhandled interpolation prop

[junbong]

Self Checklist

• I wrote a PR title in English.
• I added an appropriate label to the PR.
• I wrote a commit message in English.
• I wrote a commit message according to the Conventional Commits specification.
• I added the appropriate changeset for the changes.
• [Component] I wrote a unit test about the implementation.
• [Component] I wrote a storybook document about the implementation.
• [Component] I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox
• [New Component] I added my username to the correct directory in the CODEOWNERS file.

Related Issue

Fixes #1016

Summary

Text component should support CSS interpolation but currently not. So I had add code to handling this interpolation prop.

Details

interpolation prop which is declared in StylableComponentProps is injectable but not working because there is no handling code currently in Text.styled.ts style file.

So I had add some handling code to Text.styled.ts style file.

const Text = styled.span<TextProps & TextStyledProps>`
  ${props => props.typo};
  ${props => props.interpolation};  /* → added */
  ...
`

I thought that it should be placed after props.typo because 'used-place' level injected style is worth than 'code-level' of component.

Breaking change or not (Yes/No)

No

References

N/A

[changeset-bot]

🦋 Changeset detected

Latest commit: 083d0a0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@channel.io/bezier-react	Patch
bezier-figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[sungik-choi]

• 적절한 라벨로 변경했습니다.
• changeset 추가 부탁드립니다!

[codecov]

Codecov Report

Base: 71.15% // Head: 71.16% // Increases project coverage by +0.00% 🎉

Coverage data is based on head (083d0a0) compared to base (51e4569).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@           Coverage Diff            @@
##           next-v1    #1018   +/-   ##
========================================
  Coverage    71.15%   71.16%           
========================================
  Files          208      208           
  Lines         2961     2962    +1     
  Branches       821      821           
========================================
+ Hits          2107     2108    +1     
  Misses         736      736           
  Partials       118      118           

Impacted Files	Coverage Δ
...es/bezier-react/src/components/Text/Text.styled.ts	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build