Merge pull request #45 from 8845musign/add-text-in-text-example

Add text in text Example

src/components/react/examples/text/TextInText.tsx

@@ -0,0 +1,15 @@
+import { Text } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const TextInText: FC = () => {
+  return (
+    <Text type="note" size="lg">
+      <Text as="span" type="note" size="lg" color="alert" bold>
+        Alert:
+      </Text>{' '}
+      Please fill in all fields
+    </Text>
+  );
+};
+
+export default TextInText;

src/pages/components/examples/text/text-in-text.astro

@@ -0,0 +1,8 @@
+---
+import TextInText from '@components/react/examples/text/TextInText';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
+---
+
+<ExampleLayout title="TextInText Example | Text">
+  <TextInText client:only="react" />
+</ExampleLayout>

src/pages/components/text.mdx

@@ -12,39 +12,54 @@ thumbnail: '/assets/images/components/thumbnail-text.svg'
 
 ## Usage
 
-- テキストのスタイルに困った場合、シンプルに `<Text>` でテキストを囲ってください
-  - `props` を指定しなくとも、本文で使用するスタイル（`type='body'`、`size='md'`）がデフォルトで適用されています
-- デフォルトでは、`<p>` 要素としてレンダリングされます
+- テキストのスタイルに困った場合、シンプルに`<Text>`でテキストを囲ってください
+  - `props`を指定しなくとも、本文で使用するスタイル（`type='body'`、`size='md'`）がデフォルトで適用されています
+- デフォルトでは、`<p>`要素としてレンダリングされます
 
-### `<p>` 要素が適さない場合
+### `<Text>`内の一部を装飾したい
 
-- テキストのマークアップとして、`<p>` 要素は大きく困ることはないはずです
+例えば一部の単語を強調したいケースなどがあります。`<Text>`をネストし、`as` propで`span`を指定、装飾したいpropを追加します。
+
+```jsx
+<Text type="note" size="lg">
+  <Text as="span" type="note" size="lg" color="alert" bold>  // [!code ++]
+    Alert:
+  </Text>  // [!code ++]
+  Please fill in all fields
+</Text>
+```
+
+実際の動作例は[text in text](/components/examples/text/text-in-text)を参照してください。
+
+### `<p>`要素が適さない場合
+
+- おおむね`<p>`要素を使用すれば問題有りません
 - ただし、いくつかのケースで問題があります
-  - （ケースとして、ほとんどないと思いますが）`<p>` 要素に `<p>` 要素を内包できないため、そのままでは `<Text>` 同士のネストができません
+  - `<p>`要素に`<p>`要素を内包できません
     - ネストした場合、ブラウザの修復により構造が崩れる可能性があります
-- `<button>` のような、フローコンテンツを子に持てない要素が存在します[^phrasing]
-- 解決策として、`as` propでレンダリングされる要素を変更します
+  - `<button>`のような、`<p>`などのフローコンテンツを子に持てない要素が存在します[^phrasing]
+  - これらの解決策として、`as` propでレンダリングされる要素を変更します。`span`が良いでしょう
 
 [^phrasing]: (記述コンテンツ - コンテンツカテゴリー - HTML: ハイパーテキストマークアップ言語 | MDN)[https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#%E8%A8%98%E8%BF%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84]
 
 ### ブロックレベル要素が適さない場合
 
-- `<p>` はブロックレベル要素[^block]のため水平方向の領域を占有します
+- `<p>`はブロックレベル要素[^block]のため水平方向の領域を占有します
 - デザイン上、不都合がある可能性があります
 - いくつかの解決策が考えられます
-  - `as` propでインラインレベルの要素に変更
-  - CSSで `display: inline` などを指定
-  - `<Text>` の親要素の `display` に `flex` や `grid` を指定
+  - `as`propでインラインレベルの要素に変更
+  - CSSで`display: inline`などを指定
+  - `<Text>`の親要素の`display`に`flex`や`grid`を指定
 
 [^block]: [Block-level content (ブロックレベルコンテンツ) - Block-level content (ブロックレベルコンテンツ) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN | MDN](https://developer.mozilla.org/ja/docs/Glossary/Block-level_content)
 
 ### 「テキスト」に使えるマークアップ
 
 代表的なもの列挙します。
-`<div>` や `<span>` を使う前に、以下のマークアップを検討してください。
+`<div>`や`<span>`を使う前に、以下のマークアップを検討してください。
 
 - 見出し
-  - `<h1>` 〜 `<h6>`
+  - `<h1>`〜`<h6>`
 - 注釈など
   - `<small>`（単純に「小さい文字」ではないため注意）
 - 強調
@@ -65,3 +80,5 @@ thumbnail: '/assets/images/components/thumbnail-text.svg'
 ## Related resources
 
 - [コンテンツカテゴリー - HTML: ハイパーテキストマークアップ言語 | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories)
+
+